Виджеты. Checkbox FAB AlertDialog Switch

➡️Ссылка на репозиторий с кодом этого урока

Подготовка

Создаём новый Flutter проект todo_app

На примере разработки небольшого приложения Список Дел изучим новые виджеты

• Виджет Checkbox
• Виджет FloatingActionButton (FAB)
• Виджет AlertDialog
• Виджет Switch

Виджет Checkbox

Виджет Checkbox позволяет выбрать один из двух вариантов: выбран или не выбран.

Основные свойства Checkbox:

• value: bool - текущее состояние (true - выбран, false - не выбран).
• onChanged: колбэк-функция, вызываемая при изменении состояния чекбокса пользователем.

Checkbox(  
  value: true,  
  onChanged: (bool? newValue) {  
     // Используем newValue
  },  
)

                  

Добавим в проект файлы

• screens/todo_screen.dart
• models/task.dart

Файл main.dart

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(const ToDoApp());  
}  
  
class ToDoApp extends StatelessWidget {  
  const ToDoApp({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: "Список Дел",  
      theme: ThemeData(  
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), // Цвета  
      ),  
      debugShowCheckedModeBanner: false,  
      home: ToDoScreen(),  
  
    );  
  }  
}

                  

Файл task.dart

class Task {  
  String text;  
  bool isDone;  
  
  Task({required this.text, this.isDone = false});  
}

                  

Добавление списка с чекбоксами

Добавим новый экран как StatefulWidget.

Файл todo_screen.dart

import 'package:flutter/material.dart';  
  
import '../models/task.dart';  
  
class ToDoScreen extends StatefulWidget {  
  const ToDoScreen({super.key});  
  @override  
  State<ToDoScreen> createState() => _ToDoScreenState();  
}  
  
  
class _ToDoScreenState extends State<ToDoScreen> {  
  // Список задач  
  final List<Task> _tasks = [  
    Task(text: 'Купить молоко'),  
    Task(text: 'Изучить нейронки'),  
    Task(text: 'Купить RTX 5090', isDone: true), // Пример выполненной задачи  
  ];  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: const Text('Список Задач'),  
      ),  
      body: ListView.builder(  
        itemCount: _tasks.length, // Количество задач  
        itemBuilder: (context, index) {  
  
          final task = _tasks[index]; // Текущая задача  
  
          return ListTile(  
            // Чекбокс слева  
            leading: Checkbox(  
              value: task.isDone, // значение выполненности из объекта task  
              onChanged: (bool? newValue) {  
                // При изменении чекбокса, переключаем статус задачи  
                setState(() {  
                  task.isDone = newValue ?? false; // Меняем статус на новый  
                });  
              },  
            ),  
            // Текст задачи с зачеркиванием  
            title: Text(  
              task.text,  
              style: TextStyle(  
                decoration: task.isDone  
                    ? TextDecoration.lineThrough // Зачеркнутый, если выполнена  
                    : TextDecoration.none, // Обычный, если не выполнена  
              ),  
            ),  
          );  
        },  
      ),  
    );  
  }  
}

                  

Что происходит в этом коде и на экране:

1. Мы определили класс Task для хранения данных.
2. В _TaskListScreenState создан список _tasks, содержащий объекты Task.
3. ListView.builder строит список элементов
4. Для каждого элемента списка (itemBuilder) создается ListTile.
5. В leading ListTile помещен Checkbox. Его value связан со статусом isDone соответствующей задачи.
6. onChanged чекбокса вызывает setState().
7. setState() уведомляет фреймворк, что состояние (_tasks список) изменилось, и виджет должен перестроиться.
8. При перерисовке, Text виджет задачи проверяет task.isDone и применяет или убирает TextDecoration.lineThrough

Виджет FloatingActionButton (FAB)

Виджет FloatingActionButton - это круглая кнопка с иконкой, которая "плавает" над пользовательским интерфейсом, обычно в правом нижнем углу экрана. Она предназначена для выполнения основного действия на текущем экране.

// Это параметр виджета Scaffold !
// ...
floatingActionButton: FloatingActionButton(  
  onPressed: () {},  
  child: Icon(Icons.add),  
),

                  

// Это параметр виджета Scaffold !
// ...
floatingActionButton: FloatingActionButton.extended(
  onPressed: () {}, 
  label: const Text('Добавить'), // Текст на кнопке
  icon: const Icon(Icons.add), // Иконка на кнопке
  tooltip: 'Добавить новую задачу',
),

                  

Основные свойства FloatingActionButton:

• onPressed: колбэк-функция, вызываемая при нажатии на кнопку.
• child: Widget? - виджет внутри кнопки (обычно Icon).
• tooltip: String? - текст, который отображается при долгом нажатии на кнопку
• mini: bool - делает кнопку меньше.
• elevation: double? - высота тени под кнопкой.

Добавим

• Метод showAddTaskDialog()
• Параметр floatingActionButton

Файл todo_screen.dart

import 'package:flutter/material.dart';  
  
import '../models/task.dart';  
  
class ToDoScreen extends StatefulWidget {  
  const ToDoScreen({super.key});  
  
  @override  
  State<ToDoScreen> createState() => _ToDoScreenState();  
}  
  
  
class _ToDoScreenState extends State<ToDoScreen> {  
  // Список задач  
  final List<Task> _tasks = [  
    Task(text: 'Купить молоко'),  
    Task(text: 'Изучить нейронки'),  
    Task(text: 'Купить RTX 5090', isDone: true), // Пример выполненной задачи  
  ];  
  
  // Метод для показа диалога добавления задачи  
  void showAddTaskDialog() {  
    // Логика показа диалога  
    print('FAB нажата, показать диалог'); // Placeholder  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: const Text('Список Задач'),  
      ),  
      // Добавляем FAB  
  
      body: ListView.builder(  
        itemCount: _tasks.length, // Количество задач  
        itemBuilder: (context, index) {  
  
          final task = _tasks[index]; // Текущая задача  
  
          return ListTile(  
            // Чекбокс слева  
            leading: Checkbox(  
              value: task.isDone, // значение выполненности из объекта task  
              onChanged: (bool? newValue) {  
                // При изменении чекбокса, переключаем статус задачи  
                setState(() {  
                  task.isDone = newValue ?? false; // Меняем статус на новый  
                });  
              },  
            ),  
            // Текст задачи с зачеркиванием  
            title: Text(  
              task.text,  
              style: TextStyle(  
                decoration: task.isDone  
                    ? TextDecoration.lineThrough // Зачеркнутый, если выполнена  
                    : TextDecoration.none, // Обычный, если не выполнена  
              ),  
            ),  
          );  
        },  
      ),  
  
      floatingActionButton: FloatingActionButton.extended(  
        onPressed: showAddTaskDialog, // Вызываем метод показа диалога  
        label: const Text('Добавить'), // Текст на кнопке  
        icon: const Icon(Icons.add), // Иконка на кнопке  
        tooltip: 'Добавить новую задачу',  
      ),  
    );  
  }  
}